<template>
  <div class="common">
    <div class="sideBar">
      <el-menu @select="selcetMenu" :default-active="$route.meta.title" class="sideBar-wrapper" background-color="#2F4050" text-color="#fff" active-text-color="#fff">
        <el-submenu :index="item.name" v-for="(item,index) in menuList" :key="index">
          <template slot="title">
            <span>{{item.name}}</span>
          </template>
          <el-menu-item-group v-if="item.name!='酒厂管理'">
            <el-menu-item :index="todo.name" v-for="(todo,k) in item.children" :key="k">{{todo.name}}</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group v-else>
            <el-menu-item :index="'酒厂'+todo.name" v-for="(todo,k) in item.children" :key="k">{{todo.name}}</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </div>
    <div class="cont">
      <Breadcrumb></Breadcrumb>
      <div class="cont-wrapper">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import Breadcrumb from '../../components/breadcrumb/index.vue'
export default {
  data() {
    return {
      menuList: []
    }
  },
  mounted() {
    this.getMenu();
  },
  methods: {
    async getMenu() {
      let { data } = await this.$post({
        api: '	/getMenus'
      });
      if (data.code === 0) {
        this.menuList = data.data;
      } else {
        this.$message({
          type: 'error',
          message: data.msg
        })
      }
    },
    selcetMenu(val) {
      this.$router.push({ name: val });
    }
  },
  components: {
    Breadcrumb
  }
};
</script>

<style lang="scss">
.common {
  display: flex;
  width: 100%;
  height: 100%;
}

.sideBar {
  flex: 0 0 200px;
  width: 200px;
  height: 100%;
  overflow-x: hidden;
  &-wrapper {
    width: 220px;
    height: 100%;
    overflow-y: scroll;
  }
  .is-active {
    background-color: #2d8cf0 !important;
  }
  .el-submenu__title i {
    color: #fff;
  }
  .el-menu-item-group__title {
    padding: 0;
  }
}

.cont {
  flex: 1;
  min-height: 100%;
  padding: 30px;
  background: #f5f8fb;
  box-sizing: border-box;
  overflow-y: scroll;
  &-wrapper {
    overflow: hidden;
    width: 100%;
    min-height: calc(100vh - 105px);
    background: #fff;
    box-sizing: border-box;
  }
}
</style>